<template>
  <a-form
    class="login-form"
    ref="formRef"
    layout="horizontal"
    :rules="rules"
    :model="formState"
    :wrapper-col="wrapperCol"
  >
    <a-form-item name="username">
      <a-input
        autofocus
        v-model:value="formState.username"
        @pressEnter="onSubmit"
        placeholder="用户名"
      >
        <template #prefix
          ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item name="password">
      <a-input
        v-model:value="formState.password"
        @pressEnter="onSubmit"
        type="password"
        placeholder="密码"
      >
        <template #prefix
          ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
        /></template>
      </a-input>
    </a-form-item>
    <a-form-item name="captcha">
      <div class="flex gap-4">
        <a-input
          v-model:value="formState.captcha"
          @pressEnter="onSubmit"
          placeholder="验证码"
        >
        </a-input>
        <Captcha
          :change="data.change_img_code"
          @click="changeImageCode"
          @getCode="backImageCode"
        ></Captcha>
      </div>
    </a-form-item>
    <a-form-item>
      <a-button
        type="primary"
        @click="onSubmit"
        style="width: 100%"
        :disabled="formState.username === '' || formState.password === ''"
      >
        登录
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRaw, UnwrapRef } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { LoginForm } from "model";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
import { login } from "@/controller/User";
import { useRouter } from "vue-router";
import message from "ant-design-vue/es/message";
import Captcha from "../Captcha.vue";

export default defineComponent({
  name: "RegisterForm",
  components: {
    UserOutlined,
    LockOutlined,
    Captcha,
  },
  setup() {
    const formRef = ref();
    const router = useRouter();
    const realCode = ref<string>("");
    const formState: UnwrapRef<LoginForm> = reactive({
      username: "",
      password: "",
      captcha: "",
    });
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(async () => {
          try {
            await login(toRaw(formState), realCode.value);
            message.success(formState.username + "登录成功，请稍等片刻。");
            setTimeout(() => {
              router.push({
                name: "Edgex",
              });
            }, 1000);
          } catch (e) {
            message.error("" + e);
          }
        })
        .catch((__: ValidateErrorEntity<LoginForm>) => {
          message.error("登录格式错误，请输入完整后登录");
          console.log(__);
        });
    };
    const rules = {
      username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
    };

    const data = reactive({
      change_img_code: false, // 刷新验证码
      img_code: "", // 加密后的验证码值
    });

    // 刷新验证码操作
    const changeImageCode = () => {
      data.change_img_code = !data.change_img_code;
    };

    // 接收组件返回加密后的验证码值
    const backImageCode = (code: string) => {
      data.img_code = code;
      console.log("data", data.img_code);
      realCode.value = data.img_code;
    };

    return {
      formRef,
      formState,
      wrapperCol: { span: 24 },
      rules,
      onSubmit,
      data,
      changeImageCode,
      backImageCode,
    };
  },
});
</script>

<style scoped lang="scss"></style>
